<div id="activitiesLiveData" style="height: 100%">
    <div class="ui-layout-center" id="activitiesLiveDataChartHolder">
        <div class="ui-layout-north">
            <div id="activitiesLiveDataTable"></div>
        </div>
        <div class="ui-layout-center">
            <div id="activitiesLiveDataChart" class="ui-layout-center"></div>    
        </div>
    </div>
    <div class="ui-layout-east">
        <div id="activitiesLiveDataMixersStatusTable"></div>
        <div id="activitiesLiveDataLinesStatusTable"></div>
    </div>
</div>
<script>
    var ActivitiesLiveDataFX = function() {
        var _self = this;
        _self.refresh = false;
        _self.loaded = false;
        _self.perform = function() {
            $("#activitiesLiveData").layout({
                resizable: false,
                closable: false,
                east__size: "0.5"
            });
            $("#activitiesLiveDataChartHolder").layout({
                resizable: false,
                closable: false,
                north__size: "150"
            });
            //add description table
            $("#activitiesLiveDataTable").addClass("activitiesLiveDataTable").addClass("tbl");
            _self.loadDataForActivitiesLDSilosTable();

            //add description table
            $("#activitiesLiveDataMixersStatusTable").addClass("activitiesLiveDataMixersStatusTable").addClass("tbl");
            _self.loadDataForActivitiesLDMixersTable();

            //add description table
            $("#activitiesLiveDataLinesStatusTable").addClass("activitiesLiveDataLinesStatusTable").addClass("tbl");
            _self.loadDataForActivitiesLDLinesTable(function(){
                _self.loaded = true;
                _self.refresh = true;
            });
        };
        _self.loadDataForActivitiesLDSilosTable = function(options, callback) {
            var params = {
                request: 400,
                dataType: "json"
            };
            $.getJSON(window.CONSTANTS.SERVICE_URL, params, function(response){
                //posto vec imam response, da bih izbegao dupliranje ajax poziva, 
                //nasetujem response u params na osnovu kojih se pravi tabela
                params.response = response;
                window.tableConstructor.generateTable(params, callback);
                //draw chart
                var chartData = {};
                $.each(response, function(key, value) {
                    chartData[value.Name] = parseInt(value.Value);
                });
                
                var chartParams = {
                    domElement: $("#activitiesLiveDataChart"),
                    yAxisDots: [1000, 11000, 21000],
                    chartData: chartData,
                    refresh : _self.refresh
                };
                window.chart.draw(chartParams);
            });
            
        };
        _self.loadDataForActivitiesLDMixersTable = function(callback) {
            var params = {
                request: 401,
                dataType: "json"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataForActivitiesLDLinesTable = function(callback) {
            var params = {
                request: 402,
                dataType: "json"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.assignEventHandlers = function(){
            $(document).on('mouseover', '#activitiesLiveDataTable .row.data', function(){
                var x = $(this).find('.col').first().html();
                $('.bar.'+x).addClass('highlight');
            });
            $(document).on('mouseout', '#activitiesLiveDataTable', function(){
                $('.bar').removeClass('highlight');
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off('mouseover', '#activitiesLiveDataTable .row.data');
            $(document).off('mouseout', '#activitiesLiveDataTable');
        };
/*        _self.refreshData = function(interval){
            setInterval(function(){
                _self.loadDataForActivitiesLDSilosTable();
                _self.loadDataForActivitiesLDMixersTable();
                _self.loadDataForActivitiesLDLinesTable();
                _self.refresh = true;
            }, interval);
        };*/
    };
    if(!window.aLiveDataFX){
        window.aLiveDataFX = new ActivitiesLiveDataFX();
        window.aLiveDataFX.perform();
        window.aLiveDataFX.clearEventHandlers();
        window.aLiveDataFX.assignEventHandlers();
        //window.aLiveDataFX.refreshData(5000);
    }
    else{
        window.aLiveDataFX.perform();
        window.aLiveDataFX.clearEventHandlers();
        window.aLiveDataFX.assignEventHandlers();
        //window.aLiveDataFX.refreshData(5000);
    }
</script>